<template>
  <div :class="['myarticlelist', { space: !space }]">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="(item, index) in articleData.data"
        :key="index"
        @click="linkToArticleShow(item.id)"
      >
        <template #title>
          <div class="left">
            <div class="top">
              {{ item.title }}
            </div>
            <div class="bottom">
              <van-icon name="eye-o" />
              <span class="nums">收藏({{ item.lovenum || 0 }})</span>
              <van-icon name="thumb-circle" />
              <span class="nums">点赞({{ item.click || 0 }})</span>
            </div>
          </div>
        </template>
        <template #default>
          <div class="right">
            <van-image :src="baseURL + item.pic"></van-image>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getUserSaveSupport, getUserArticle } from '@/api/user'
import { getCateList } from '@/api/home'
export default {
  name: 'myarticlelist',
  props: {
    type: String,
    cateid: String,
    space: {
      type: Boolean,
      default: false
    }
  },
  async created() {
    this.getUserSaveSupport(this.type)
  },
  data() {
    return {
      loading: false,
      finished: false,
      articleData: {
        count: 0,
        currentPage: 0,
        data: [],
        pageSize: 0,
        totalPages: 0
      },
      baseURL: 'http://124.223.14.236:8060/',
      page: 0
    }
  },
  methods: {
    async onLoad() {
      this.getUserSaveSupport(this.type)
    },
    async getUserSaveSupport(t) {
      this.loading = true
      let result = null
      let list = []
      let len = 0
      try {
        this.page++
        switch (t) {
          case '1':
          case '2':
            result = await getUserSaveSupport(t, this.page)
            list = result.data.list.data
            len = result.data.list.data.length
            break
          case '3':
            result = await getUserArticle(this.page)
            list = result.data.data
            len = result.data.data.length
            break
          case '4':
            result = await getCateList(this.cateid, this.page)
            list = result.data.list.data
            len = result.data.list.data.length
            break
          default:
            break
        }
        if (len <= 0) {
          this.finished = true
        } else {
          this.articleData.data.push(...list)
          this.finished = len < 4
        }
      } catch (error) {
        this.$toast.fail('请求失败')
      } finally {
        this.loading = false
      }
    },
    linkToArticleShow(aid) {
      this.$router.push({
        name: 'articleshow',
        query: {
          aid
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.myarticlelist {
  ::v-deep {
    .van-image__error,
    .van-image__img,
    .van-image__loading {
      width: 100px;
      height: 100px;
      padding: 5px;
    }
  }
  .left {
    height: 100%;
    width: 250px;
    .top {
      margin-bottom: 10px;
      margin-top: 30px;
      font-size: 14px;
    }
    .bottom {
      color: #969799;

      .nums {
        margin: 0 5px;
        &:first-of-type {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
